<template>
  <el-container style="height: auto; border: 1px solid #eee">
    <el-container>

      <el-header style="text-align: right; font-size: 12px">
        <p align="center"><font style="size: 19px;color: azure;font-family: 华文行楷">用户投诉与反馈处理中心</font>
        <span style="float: right">
        <router-link :to="{name:'Mine'}">
          <i class="el-icon-back"><font style="font-size: 15px"> 返回个人中心</font></i>
        </router-link>
      </span> </p>
      </el-header>

      <el-main>
        <el-tabs type="border-card" style="height: auto">
          <el-tab-pane label="用户投诉">
            <el-table
                :data="tableDatacom"
                style="width: 100%"
             >
              <el-table-column
                  label="投诉ID"
                  prop="complaintsId">
              </el-table-column>
              <el-table-column
                  label="投诉类型"
                  prop="type">
              </el-table-column>
              <el-table-column
                  label="被投诉人ID"
                  prop="complained">
              </el-table-column>
              <el-table-column
                  label="投诉原因"
                  prop="reason">
              </el-table-column>
              <el-table-column
                  label="操作"
                  prop="id">
                <template slot-scope="scope">
                  <el-button  @click="finishcomplaints(scope)">完成处理</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                :current-page="pagecom"
                :page-sizes="[12, 20]"
                background
                :page-size="limitcom"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalcom"
            >
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="用户反馈">
            <el-table
                :data="tableDatafeed"
                style="width: 100%">
              <el-table-column
                  label="反馈ID"
                  prop="feedbackId">
              </el-table-column>
              <el-table-column
                  label="id"
                  prop="id">
              </el-table-column>
              <el-table-column
                  label="反馈内容"
                  prop="contents">
              </el-table-column>
            </el-table>
            <el-pagination
                :current-page="pagefeed"
                :page-sizes="[12, 20]"
                background
                :page-size="limitfeed"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalfeed"
            >
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="用户信息">
            <el-table
                :data="tableDatainfo"
                style="width: 100%"
            >
              <el-table-column
                  label="ID"
                  prop="id">
              </el-table-column>
              <el-table-column
                  label="用户姓名"
                  prop="name">
              </el-table-column>
              <el-table-column
                  label="手机号"
                  prop="phone">
              </el-table-column>
              <el-table-column
                  label="电子邮箱"
                  prop="email">
              </el-table-column>
              <el-table-column
                  label="账号状态"
                  prop="used">
              </el-table-column>
              <el-table-column
                  label="操作">
                <template slot-scope="scope">
                  <el-button  @click="ban(scope)">封号</el-button><el-button @click="noban(scope)">解封</el-button>
                </template>

              </el-table-column>
            </el-table>
            <el-pagination
                :current-page="pageinfo"
                :page-sizes="[12, 20]"
                background
                :page-size="limitinfo"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalinfo"
            >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </el-container>
</template>



<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-tabs{
  height: auto;
}

</style>

<script>
import {feedbacklist,complaintslist,allUsers,disableUser,complaintsfinish} from '../../api/index';
export default {
  data() {
    return {
      tableDatacom: [],
      tableDatafeed:[],
      tableDatainfo:[],
      used:['停止使用','正常'],
      keywords:'',
      pagecom:1,
      pagefeed:1,
      pageinfo:1,
      totalcom:0,
      totalfeed:0,
      totalinfo:0,
      limitcom: 10,
      limitfeed:10,
      limitinfo:10
    }
  },
  methods: {
    noban(n){
      this.id=n.row.id;
      console.log(this.id)
      console.log(n.row.used)
      disableUser({id:this.id,used:1}).then(res=>{
        console.log(res)
        if (res.data.code === 100) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          allUsers().then(res=>{
            console.log(res)
            this.tableDatainfo=res.data.data.list
            this.totalinfo=this.tableDatainfo.length
            for (let i = 0; i < this.tableDatainfo.length; i++) {
              this.tableDatainfo[i].used = this.used[this.tableDatainfo[i].used]
            }
          })
        }
      })
    },
    ban(a){
      this.id=a.row.id;
      console.log(this.id)
      console.log(a.row.used)
      disableUser({id:this.id,used:0}).then(res=>{
        console.log(res)
            if (res.data.code === 100) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              allUsers().then(res=>{
                console.log(res)
                this.tableDatainfo=res.data.data.list
                this.totalinfo=this.tableDatainfo.length
                for (let i = 0; i < this.tableDatainfo.length; i++) {
                  this.tableDatainfo[i].used = this.used[this.tableDatainfo[i].used]
                }
              })
            }
      })
    },
    finishcomplaints(c){
      complaintsfinish({id:c.row.complaintsId}).then(res=>{
        console.log(res)
        if (res.data.code === 100) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          feedbacklist().then(res=>{
            console.log(res.data.data.list)
            this.tableDatafeed=res.data.data.list
            this.totalfeed = this.tableDatafeed.length;
          })
        }
      })
    }
  },
  created: function () {
    feedbacklist().then(res=>{
      console.log(res.data.data.list)
      this.tableDatafeed=res.data.data.list
      this.totalfeed = this.tableDatafeed.length;
    })
    complaintslist().then(res=>{
      console.log(res.data.data.list)
      this.tableDatacom=res.data.data.list
      this.totalcom = this.tableDatafeed.length;
    })
    allUsers().then(res=>{
      console.log(res)
      this.tableDatainfo=res.data.data.list
      this.totalinfo=this.tableDatainfo.length
      for (let i = 0; i < this.tableDatainfo.length; i++) {
        this.tableDatainfo[i].used = this.used[this.tableDatainfo[i].used]
      }
    })
  }
}
</script>
